<!doctype html>
<html lang="en" style="background: #4f8ad0">
    <head>
        <meta charset="UTF-8">
        <title>{:L("_LOGIN_BACKGROUND_")}</title>
        <link rel="stylesheet" type="text/css" href="__CSS__/login.css" media="all">
        <!--zui-->
        <link rel="stylesheet" type="text/css" href="__ZUI__/css/zui.css" media="all">
        <!--zui end-->
		 <style type="text/css">
        .background {
            position: absolute;
            right: 0px;
            top: 0px;
            bottom: 0px;
            left: 0px;
            background: #52B4D1;
            overflow: hidden;
        }
    </style>
    </head>
    <body >
		<!-- 背景 -->
    <div id="particles-js" class="background"></div>
        <div id="main-content">

            <!-- 主体 -->
            <div class="login-body">
                <div class="login-main pr">
                    <form action="{:U('login')}" method="post" class="login-form">
                        <h3 class="welcome"><img class="logo" src="__IMG__/login_logo.png">{:L("_LANDING_BACKGROUND_")}</h3>
                        <div id="itemBox" class="item-box">
                            <div class="input-group user-name" >
                                <span class="input-group-addon"><i class="icon-user"></i></span>
                                <input type="text" name="username" class="form-control" placeholder={:L("_USER_NAME_WITH_DOUBLE_")}>
                            </div>
                            <div class="input-group password">
                                <span class="input-group-addon"><i class="icon-lock"></i></span>
                                <input type="password" name="password"  class="form-control" placeholder={:L("_PASSWORD_WITH_DOUBLE_")}>
                            </div>

                            <if condition="APP_DEBUG eq false">
                                <div class="input-group password">
                                    <span class="input-group-addon"><i class="icon-ok"></i></span>
                                    <input type="text" name="verify"  class="form-control" placeholder={:L("_VERIFICATION_CODE_WITH_DOUBLE_")}  autocomplete="off">
                                    <span class="input-group-btn">
                                    <button  class="btn btn-default reloadverify" type="button"><i class="icon-refresh"></i></button>
                                    </span>
                                </div>


                                <div>
                                    <img class="verifyimg reloadverify" alt={:L("_CLICK_SWITCH_WITH_DOUBLE_")} src="{:U('Public/verify')}">
                                </div>
                            </if>

                        </div>
                        <div class="login_btn_panel">
                            <button class="login-btn" type="submit">
                                <span class="in"><i class="icon-loading"></i>{:L("_RECORD_WITH_SPACE_")} 中 ..</span>
                                <span class="on">{:L("_RECORD_WITH_SPACE_")}</span>
                            </button>
                            <div class="check-tips"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
	<!--[if lt IE 9]>
    <script type="text/javascript" src="__STATIC__/jquery-1.10.2.min.js"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
    <script type="text/javascript" src="__PUBLIC__/js/jquery-2.0.3.min.js"></script>
    <!--<![endif]-->
    <script type="text/javascript" src="__ZUI__/js/zui.js"></script>
	<script type="text/javascript" src="__PUBLIC__/static/js/particles.min.js"></script>
    <script type="text/javascript">
    	/* 登陆表单获取焦点变色 */
    	$(".login-form").on("focus", "input", function(){
            $(this).closest('.item').addClass('focus');
        }).on("blur","input",function(){
            $(this).closest('.item').removeClass('focus');
        });

    	//表单提交
    	$(document)
	    	.ajaxStart(function(){
	    		$("button:submit").addClass("log-in").attr("disabled", true);
	    	})
	    	.ajaxStop(function(){
	    		$("button:submit").removeClass("log-in").attr("disabled", false);
	    	});

    	$("form").submit(function(){
    		var self = $(this);
    		$.post(self.attr("action"), self.serialize(), success, "json");
    		return false;

    		function success(data){
    			if(data.status){
    				window.location.href = data.url;
    			} else {
                    var msg = new $.Messager(data.info, {placement: 'bottom'});
                    msg.show();
    				//刷新验证码
                    $('[name=verify]').val('');
    				$(".reloadverify").click();
    			}
    		}
    	});

		$(function(){
			//初始化选中用户名输入框
			$("#itemBox").find("input[name=username]").focus();
			//刷新验证码
			var verifyimg = $(".verifyimg").attr("src");
            $(".reloadverify").click(function(){
                if( verifyimg.indexOf('?')>0){
                    $(".verifyimg").attr("src", verifyimg+'&random='+Math.random());
                }else{
                    $(".verifyimg").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
                }
            });

            //placeholder兼容性
                //如果支持
            function isPlaceholer(){
                var input = document.createElement('input');
                return "placeholder" in input;
            }
                //如果不支持
            if(!isPlaceholer()){
                $(".placeholder_copy").css({
                    display:'block'
                })
                $("#itemBox input").keydown(function(){
                    $(this).parents(".item").next(".placeholder_copy").css({
                        display:'none'
                    })
                })
                $("#itemBox input").blur(function(){
                    if($(this).val()==""){
                        $(this).parents(".item").next(".placeholder_copy").css({
                            display:'block'
                        })
                    }
                })
            }
			
			//背景粒子效果
            particlesJS('particles-js', {
                particles: {
                    color: '#FFF',
                    shape: 'circle', // "circle", "edge" or "triangle"
                    opacity: 1,
                    size: 2,
                    size_random: true,
                    nb: 200,
                    line_linked: {
                        enable_auto: true,
                        distance: 100,
                        color: '#FFF',
                        opacity: .8,
                        width: 1,
                        condensed_mode: {
                            enable: false,
                            rotateX: 600,
                            rotateY: 600
                        }
                    },
                    anim: {
                        enable: true,
                        speed: 1
                    }
                },
                interactivity: {
                    enable: true,
                    mouse: {
                        distance: 250
                    },
                    detect_on: 'canvas', // "canvas" or "window"
                    mode: 'grab',
                    line_linked: {
                        opacity: .5
                    },
                    events: {
                        onclick: {
                            enable: true,
                            mode: 'push', // "push" or "remove" (particles)
                            nb: 4
                        }
                    }
                },
                retina_detect: true
            });
			
		});
    </script>
</body>
</html>